<template>
	<div class="imgdiv" ref="imgdiv" :style="'width:'+width+'px;height:'+height+'px;'" :class="{'diableDiv':disabled}">
	   <div class="el-upload-list--picture-card imgd" v-for="(file) in fileList">
	      <img
	        class="el-upload-list__item-thumbnail imgclass"
	        :src="file.url" alt=""
	      >
	      <span class="el-upload-list__item-actions">
	        <span
	          class="el-upload-list__item-preview"
	          @click="handlePictureCardPreview(file)"
	        >
	          <i class="el-icon-zoom-in"></i>
	        </span>
	        <span
	          v-if="!disabled"
	          class="el-upload-list__item-delete"
	          @click="handleDownload(file)"
	        >
	          <i class="el-icon-download"></i>
	        </span>	        
	      </span>
	    </div>		
		<winImg v-if="showImg" :src="dialogImageUrl" @close="showImg=false"></winImg>
	</div>
</template>

<script>
	import winImg from '@/system/components/winImg.vue'	
	export default {
	name: "imgView",
	components:{
		winImg
	},
	props:{		
        pfileList:{default:null},
        height:{default:100},
        width:{default:0},
        disabled:{default:false}
	},
    data() {
      return {
        dialogImageUrl: '',
        fileList: [],       
        showImg: false,       
        // uploadFiles
      };
    },
    watch: {
	　　pfileList: {
	　　　　handler(newValue, oldValue) {
	　　　　　　this.setUrl();
	　　　　},
	　　　　deep: true
	　　}
	},
    mounted(){ 
    	this.setUrl();   	
    	this.setSize();    	
    },
    methods: {
      setUrl(){
      	if(this.pfileList){//把字段内容转换成 图片的url  
      		this.fileList = [];
    		let arr = this.pfileList.split(",");
    		for(let i=0;i<arr.length;i++){
    			let obj = {url:this.api+arr[i],delUrl:arr[i]};					
      			this.fileList.push(obj);     
    		}
    	} 
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.showImg = true;
      },
      handleDownload(file) {              
        window.location.href = this.api+ file.delUrl;         
      },      
      setSize(){
      	//.el-upload-list--picture-card .el-upload-list__item  .el-upload--picture-card      	
      	this.$refs.imgdiv.style.setProperty('--imgheight', (this.height - 6) +'px');      	
      },
    }
  }
</script>

<style scoped>	
	.imgdiv{
		--imgheight:0px;		
		text-align: center;
		overflow-x: auto;
		overflow-y: hidden;		
	}
	.imgd,.imgclass{
		width: var(--imgheight);
    	height: var(--imgheight);    
    	border-radius: 4px;  	
	}	
	.imgd{
		margin-top: 3px;
		display: inline-block;
		position: relative;		  	
	}
</style>